<template>
	<view class="custom-tab-bar">
		<view v-for="(item, index) in list" :key="index" @click="switchTab(item,index)"
			:class="{ 'active': count === index }">
			<!-- 图标和文字 -->
			<image :src="count === index ? item.selectedIconPath : item.iconPath" />
			<text class="title" :style="{ color: count === index ? selectedColor : '' }">
				{{ item.text }}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
		    count: {
		      type: [Number, String],
		      default: 0,
		      validator: (value) => value >= 0  // 自定义验证
		    }
		  },
		data() {
			return {
				current: 0,
				selectedColor: 'transparent', // 通过CSS渐变覆盖
				list: [{
						pagePath: "/pages/index/index",
						text: "首页",
						iconPath: "/static/theme/1-001.png",
						selectedIconPath: "/static/theme/1-002.png"
					},
					{
						pagePath: "/pages/meadowlands/index",
						text: "球馆",
						iconPath: "/static/theme/5-001.png",
						selectedIconPath: "/static/theme/5-002.png"
					},
					{
						pagePath: "/pages/my/index",
						text: "我的",
						iconPath: "/static/theme/4-001.png",
						selectedIconPath: "/static/theme/4-002.png"
					}
				]
			};
		},
		methods: {
			switchTab(item,index) {
				uni.switchTab({
					url: item.pagePath
				});
				this.current = this.list.findIndex(v => v.pagePath === item.pagePath);
			}
		}
	};
</script>

<style lang="scss">
	.custom-tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #240F41;
		view {
			display: flex;
			flex-direction: column;
			align-items: center;
			text{
				color: #ffffff;
				font-size: 12px;
				margin-top: 4px;
			}
			image {
				width: 24px;
				height: 24px;
			}


		}
	}
	.active {
		  .title{
			  background: linear-gradient(90deg, #C829F3 0%, #4516CA 100%);
			  /* 关键属性：背景裁剪到文字 */
			  -webkit-background-clip: text;
			  background-clip: text;
			  /* 隐藏原始文字颜色 */
			  color: transparent;
		  }
	}
</style>